<template>
    <div class="create-whouse-ownership-page">
        <el-form ref="createWHOSForm" :inline="true" :model="createWHOSForm" class="demo-form-inline" style="border-bottom:1px solid #ccc;position:relative;">
            <el-form-item label="法人名称" class="selectMB10 label-w2 " v-if="legalPersonDropDown.length==1" prop="legalPersonName"  :rules="[{ required: true, message: '法人名称不能为空'}]">  <!--  v-if="!powerFlag"  -->
                <el-input size="mini" disabled v-model="createWHOSForm.legalPersonName" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="法人名称" class="selectMB10 label-w2 " v-else prop="legalPersonId"  :rules="[{ required: true, message: '法人名称不能为空'}]">  <!--  v-if="!powerFlag"  -->
                <el-select size="mini" v-model="createWHOSForm.legalPersonId" placeholder="请选择" @change="selectedLegalPersonName">
                    <el-option v-for="(legalPerson,index) in legalPersonDropDown" :key="index" :label="legalPerson.legalPersonName" :value="legalPerson.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="selectMB10" style="position:absolute;right:10px;">
                <el-button class="bolder outsideBtnBS selectAll" size="mini" type="danger" @click="handleAdd">确定</el-button>
                <el-button class="bolder outsideBtnBS selectAll" size="mini" type="danger" @click="handleBack">返回</el-button>
            </el-form-item>
        </el-form>
        <!--表格
        <label class="default-label">库房明细列表</label>-->
        <el-form :inline="true" ref="form" :model="wHDetailsForm" style="display:inline-block;">
            <el-form-item label="库房明细列表" style="font-weight:bold;"></el-form-item>
            <el-form-item label="库房编码">
                <el-input size="mini" v-model="wHDetailsForm.code" placeholder="请输入库房编码"></el-input>
            </el-form-item>
            <el-form-item label="库房名称:">
                <el-input size="mini" v-model="wHDetailsForm.name" placeholder="请输入库房名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" size="mini" class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" @click="queryWHDetails">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="wHDetailsData" border style="width: 100%;overflow-y:auto;" v-loading.body="loading" element-loading-text="拼命加载中">
            <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
            <el-table-column  label="选择" header-align="center" align="center" width="80">
                <template scope="scope">
                    <el-radio-group v-model="selectedWarehouse">
                        <el-radio :label="scope.row.id" size="mini">&nbsp;</el-radio>
                    </el-radio-group> 
                </template>
            </el-table-column>
            <el-table-column prop="code" label="库房编码" header-align="center" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="库房名称" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="remark" label="库房描述" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="statusName" label="状态" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="detailAddress" label="详细地址" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="areaName" label="地区" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="nationName" label="国家" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="provinceName" label="省份" header-align="center" align="center" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="cityName" label="城市" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="countyName" label="县(区)" header-align="center" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-row :gutter="20">
            <el-col :span="12">
                <!--表格-->
                <label class="default-label">库区明细列表</label>  
                <div :model="storageSectionDetails" style="display:inline-block;margin-left:80px;">
                    <label>库区属性：</label>
                    <el-select size="mini" clearable v-model="storageSectionDetails.businessAttribute" placeholder="请选择" @change="selectedSSBA">
                        <el-option v-for="(sSBA,index) in sSBALists" :key="index" :label="sSBA.name" :value="sSBA.id"></el-option>
                    </el-select>
                </div>
                <!-- storageSectionData -->
                <el-table :data="showStorageSectionData" border height="229" style="width: 100%;margin-top:10px;overflow-y:auto;" v-loading.body="loading2" element-loading-text="拼命加载中" @selection-change="selectSSection">
                    <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                    <el-table-column type="selection" align="center"  width="40"></el-table-column>
                    <el-table-column prop="code" label="库区编码" header-align="center" width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="库区名称" header-align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="remark" label="库区描述" header-align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="statusName" label="状态" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12">
                <!--表格-->
                <label class="default-label">库位明细列表</label>
                <el-table ref="clearSel" :data="storagePositionData" border height="229" style="width: 100%;margin-top:10px;overflow-y:auto;" v-loading.body="loading3" element-loading-text="拼命加载中" @selection-change="selectSPosition">
                    <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                    <el-table-column type="selection" align="center"  width="40"></el-table-column>
                    <el-table-column prop="code" label="库位编码" header-align="center" width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="库位名称" header-align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="statusName" label="状态" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-col>
        </el-row>  
    </div>
</template>
<script>
       export default {
        data() {
            return {
                // 查询表单
                createWHOSForm:{
                    legalPersonId:"",
                    legalPersonName:"",
                    name:"",
                    code:"",
                    status:"",
                    remark:""
                },
                legalPersonDropDown:[],   //法人名称下拉列表
                statusLists:[],   //当前状态下拉列表
                loading:false,
                wHDetailsData:[],
                disabled:false,

                selectedWarehouse:"",   //选中的库房
                wHDetailsForm:{
                    code:"",
                    name:""
                },
                
                sSBALists:[],   // 库区业务属性下拉列表
                
                loading2:false,
                partStorageSectionData:[],  //根据法人ID查询法人下的所有库区信息 
                storageSectionData:[],   // 选中库房下的库区明细列表
                showStorageSectionData:[],  // 要展示的库区明细列表
                selectedstorageSectionLists:[],  // 选中的库区
                storageSectionDetails:{
                    businessAttribute:""
                },
                
                loading3:false,
                storagePositionData:[],   //库位明细列表
                selectedSPositionLists:[],  //选中的库位

                
                //查询禁用
                selectDisabled:false
            };
        },
        watch:{
            // 选中的库房改变时，触发查询库区的方法
            selectedWarehouse(){
                this.querySSDetails();
                this.wareHouseBADropDown();   // 库区属性下拉列表
            }
        },
       //进入页面立即运行此方法
       mounted: function () {
            var _this = this;
            _this.$store.commit('currentActive', 'CreateWarehouseOwnership');
            // //ajax前后查询按钮禁用
            // $(".selectAll").ajaxStart(function(){
            //     _this.selectDisabled=true;
            // });
            // $(".selectAll").ajaxStop(function(){
            //     _this.selectDisabled=false;
            // });
            _this.legalPersonDropDownValue(); //法人名称下拉列表值
            _this.dropDownValue();// 当前状态下拉列表
       },
        methods:{
             //法人名称下拉列表值
            legalPersonDropDownValue(){  
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+"legalPerson/ofCurrentUser",
                    cache:false,
                    success:function(data){
                        if(data.success){
                            _this.legalPersonDropDown = data.data;
                            if(_this.legalPersonDropDown.length == 1){
                                _this.createWHOSForm.legalPersonId = _this.legalPersonDropDown[0].id;
                                _this.createWHOSForm.legalPersonName = _this.legalPersonDropDown[0].legalPersonName;
                            }
                            _this.queryWHDetails();    //库房明细列表查询
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 多个法人  选择一个取法人的name
            selectedLegalPersonName(){
                var _this = this;
                for(var i=0;i<_this.legalPersonDropDown.length;i++){
                    if(_this.createWHOSForm.legalPersonId == _this.legalPersonDropDown[i].id){
                        _this.createWHOSForm.legalPersonName = _this.legalPersonDropDown[i].legalPersonName;
                    }
                }
                _this.filterStorage();    // 选中库房下的库区减去法人下的库区为显示的库区列表 
            },
            // 当前状态下来列表
            dropDownValue(){
                var _this=this;
                var tmp=[];
                $.ajax({
                    type:'POST',
                    url:_this.iwm_service+'iwm/getPullDownList',
                    cache:false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        if(data.success){
                            _this.statusLists=data.data['pickingArea.pickingAreaStatus'];
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            //查询库房明细列表
            queryWHDetails(){
                var _this=this;
                _this.loading=true;
                _this.selectedWarehouse="";
                var tmp={
                    name:_this.wHDetailsForm.name,
                    code:_this.wHDetailsForm.code
                };
                _this.selectDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.iwm_service+"CompanyStorage/queryWarehouse",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.loading=false;
                            _this.wHDetailsData=data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage)
                        }
                        _this.selectDisabled=false;
                    }
                });
            },
            // 库区属性下拉列表
            wareHouseBADropDown(){
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.iwm_service+'storageSection/queryBusinessAttributeById?id='+_this.selectedWarehouse,
                    cache:false,
                    // data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        if(data.success){
                            _this.sSBALists=data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 根据法人ID查询法人下的所有库区信息
            queryAllSSDetails(){
                var _this = this;
                $.ajax({
                    type: 'GET',
                    url: _this.iwm_service+"CompanyStorage/queryStorageSectionByLegalPersonId?legalPersonId="+_this.createWHOSForm.legalPersonId,
                    cache: false,
                    // data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.partStorageSectionData=data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage)
                        }
                    }
                });
            },
            //查询选中库房下的库区明细列表
            querySSDetails(){
                var _this = this;
                _this.loading2=true;
                _this.selectedstorageSectionLists=[];
                _this.queryAllSSDetails();  // 根据法人ID查询法人下的所有库区信息
                var tmp={
                    wareHouseId:_this.selectedWarehouse,
                    businessAttributeId:_this.storageSectionDetails.businessAttribute
                };
                $.ajax({
                    type: 'POST',
                    url: _this.iwm_service+"CompanyStorage/queryStorageSection",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.loading2=false;
                            _this.storageSectionData=data.data;
                            _this.filterStorage();    // 选中库房下的库区减去法人下的库区为显示的库区列表                        
                        }else{
                            _this.common.errorTip(data.errorMessage)
                        }
                    }
                });
            },
            // 选中库房下的库区减去法人下的库区为显示的库区列表
            filterStorage(){    
                var _this = this;            
                var partSSDId=[];
                if(_this.partStorageSectionData && _this.partStorageSectionData.length){
                    for(var i=0;i<_this.partStorageSectionData.length;i++){
                        partSSDId.push(_this.partStorageSectionData[i].id);
                    }
                    // 方法一
                    // var partSSDIdStr = partSSDId.toString();
                    // _this.showStorageSectionData=[];
                    // if(partSSDIdStr){
                    //     for(var k=0;k<_this.storageSectionData.length;k++){
                    //         if(partSSDIdStr.indexOf(_this.storageSectionData[k].id)==-1){
                    //             _this.showStorageSectionData.push(_this.storageSectionData[k]);
                    //         }
                    //     }
                    // }else{
                    //     _this.showStorageSectionData = _this.storageSectionData;
                    // }
                    // 方法二
                    _this.showStorageSectionData=_this.storageSectionData.filter(item => {return !partSSDId.includes(item.id)});
                    console.log("_this.storageSectionData========================");
                    console.log(_this.storageSectionData);
                    console.log("_this.showStorageSectionData===================");
                    console.log(_this.showStorageSectionData);
                }
            },
            // 选择库区属性 筛选库区
            selectedSSBA(){
                var _this = this;
                _this.querySSDetails();
            },
            // selection-change	当选择项发生变化时会触发该事件 
            selectSSection(val){
                var _this=this;
                _this.selectedstorageSectionLists =[];
                for(var i=0;i<val.length;i++){
                    _this.selectedstorageSectionLists.push({"storageSectionId":val[i].id}); 
                }
                _this.querySPDetails();
            },
             //查询库位明细列表
            querySPDetails(){
                var _this = this;
                _this.loading3=true;
                var tmp={
                    wareHouseId:_this.selectedWarehouse,
                    storageSectionIdList:_this.selectedstorageSectionLists
                };
                $.ajax({
                    type: 'POST',
                    url: _this.iwm_service+"StorageBin/WareHouseAndStorageSectionId",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.loading3=false;
                            _this.storagePositionData=data.data;
                            _this.$nextTick(function(){
                                _this.selectAll();
                            })
                        }else{
                            _this.common.errorTip(data.errorMessage)
                        }
                    }
                });
            },
            // 查询出来的库位默认全选
            selectAll(){
                var _this=this;
                for(var i in _this.storagePositionData){
                    _this.$refs.clearSel.toggleRowSelection(_this.storagePositionData[i]);//默认全选
                }
            },
            // selection-change	当选择项发生变化时会触发该事件 
            selectSPosition(val){
                var _this=this;
                _this.selectedSPositionLists =[];
                for(var i=0;i<val.length;i++){
                    _this.selectedSPositionLists.push({"storageBinId":val[i].id});  
                }
            },
            // 确定按钮   新增库房归属
            handleAdd(){
                var _this = this;
                _this.$refs["createWHOSForm"].validate((valid) => {
                    if (valid) {
                        var tmp={
                            legalPersonId:_this.createWHOSForm.legalPersonId,
                            legalPersonName:_this.createWHOSForm.legalPersonName,
                            wareHouseId:_this.selectedWarehouse,
                            companyStorageSectionValueList:_this.selectedstorageSectionLists,
                            status:true,
                            companyStorageBinValueList:_this.selectedSPositionLists
                        };
                        $.ajax({
                            type: 'POST',
                            url: _this.iwm_service+"CompanyStorage/add",
                            cache: false,
                            data:JSON.stringify(tmp),
                            dataType:'JSON',
                            contentType: "application/json;charset=utf-8",
                            success: function (data) {
                                if (data.success) {
                                    _this.common.successTip("新增成功！");
                                    _this.$router.push("/WarehouseOwnership");
                                }else{
                                    _this.common.errorTip(data.errorMessage)
                                }
                            }
                        });
                    } else {
                        _this.common.errorTip("法人名称不能为空！");
                        return false;
                    }
                });                
            },
            // 返回上个页面 
            handleBack(){
                this.$router.push("/WarehouseOwnership");
            },
            // // ===================================
            // successTip(p) {     //成功时的提示信息
            //     this.$notify({
            //         title: '成功',
            //         message: p,
            //         type: 'success'
            //     });
            // },
            // errorTip(p) {     //错误提示
            //     this.$notify.error({
            //         title: '错误',
            //         message: p
            //     });
            // }

        }
    }
</script>
